<template>
  <p-dialog :visible="visible" @close="$emit('close')" style="min-width:500px;">
    <h2>发票申请</h2>
    <!--    申请发票-->

    <el-result v-if="form.id&&!update" :icon="form.status!==2?'success':'error'" :title="title" :subTitle="subTitle">
      <template slot="extra">
        <el-link v-if="form.status===null||form.status===0" type="success" @click="update=true">修改申请</el-link>
      </template>
    </el-result>
    <template v-else>
      <el-alert :closable="false" style="margin-top:10px;margin-bottom: 10px;" type="success">
        <p>暂时只支持开电子发票，如需纸质发票请自行下载PDF打印。</p>
        <p>发票提交后，我们将尽快审核，如需加急处理，请加入QQ群找群主。</p>
      </el-alert>
      <el-form ref="form" :rules="rules" :model="form" label-width="80px" v-loading="loading">
        <el-form-item label="抬头" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="税号" prop="taxNo">
          <el-input v-model="form.taxNo"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="loading" size="mini" type="primary" @click="submit()">提交申请</el-button>
          <el-button size="mini" @click="$emit('close')">取消</el-button>
        </el-form-item>
      </el-form>
    </template>
  </p-dialog>
</template>

<script>
import api from "@/utils/api";

export default {
  name: "Invoice",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    orderId: {
      type: Number,
      default: null
    }
  },
  computed: {
    title() {
      return {
        0: '待审核',
        1: '已开票',
        2: '拒绝申请'
      }[this.form.status || 0];
    },
    subTitle() {
      return {
        0: '等待审核开票申请。',
        1: '申请通过，请查收邮箱！',
        2: '申请被拒绝，如有疑问请联系客服！'
      }[this.form.status || 0]
    }
  },
  watch: {
    orderId(val) {
      this.form.orderId = val;
      console.log(`订单id:${val}`)
    },
    visible(val) {
      if (val) {
        this.$nextTick(() => {
          this.getDetail();
        });
      }
    }
  },
  data() {
    return {
      loading: false,
      update: false,
      options: [{
        value: '0',
        label: '待审核'
      }, {
        value: '1',
        label: '已审核'
      }, {
        value: '2',
        label: '已拒绝'
      }],
      form: {
        name: '',
        taxNo: '',
        email: '',
        phone: '',
        orderId: this.orderId,
        status: null,
        createTime: '',
        id: null
      },
      rules: {
        name: [
          {required: true, message: '请输入抬头', trigger: 'blur'},
          {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
        ],
        taxNo: [
          {required: true, message: '请输入税号', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    if (this.visible) {
      this.getDetail();
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          api.invoiceApply(this.form).then(data => {
            this.form.id = data.id;
            this.update = false;
          }).finally(() => {
            this.loading = false;
          })
        }
      });
    },
    getDetail() {
      //获取发票详情
      let self = this;
      self.loading = true;
      api.getInvoiceDetail(this.orderId).then(data => {
        if (Object.keys(data).length !== 0) {
          this.form = data;
        }
      }).finally(() => self.loading = false);
    }
  }
}
</script>

<style scoped>

</style>
